import { ref } from 'vue';
import mcApi from 'mc-c2b2m-operator-api';
import { PRODUCT_ID } from '@/settings/httpSetting';
import { BasicColumn, FormSchema } from '@/components/Table';
import { FunctionOfProductModel } from 'mc-c2b2m-operator-api/types/system';

const { SystemModule } = mcApi;
const { PermissionApi } = SystemModule;

export const tableColumns: BasicColumn[] = [
  { title: 'id', dataIndex: 'id' },
  { title: '产品标识', dataIndex: 'productId' },
  { title: '名称', dataIndex: 'name' },
  { title: '是否启用', dataIndex: 'isEnable', slots: { customRender: 'isEnable' } },
  {
    title: '功能权限列表',
    dataIndex: 'functionIdList',
    slots: { customRender: 'functionIdList' },
  },
];

export const tableFormSchema: FormSchema[] = [];

const functionList = ref<FunctionOfProductModel[]>([]);
export const functionFlagList = ref<FunctionOfProductModel[]>([]);
await PermissionApi.getAllFunctionOfProduct().then((res: FunctionOfProductModel[]) => {
  functionList.value = res || [];
  handleFunctionFlagList(functionList.value);
});
function handleFunctionFlagList(list: FunctionOfProductModel[]) {
  list.forEach((item) => {
    functionFlagList.value.push(item);
    handleFunctionFlagList(item.childFuncList);
  });
}

export const modalFormSchema: FormSchema[] = [
  {
    field: 'id',
    label: '编号',
    ifShow: false,
    component: 'Input',
  },
  {
    field: 'productId',
    label: '产品id',
    ifShow: false,
    component: 'Input',
    defaultValue: PRODUCT_ID,
  },
  {
    required: true,
    field: 'name',
    label: '名称',
    component: 'Input',
  },
  {
    required: true,
    label: '功能权限',
    field: 'functionIdList',
    component: 'TreeSelect',
    componentProps: {
      multiple: false,
      showSearch: true,
      labelInValue: false,
      treeCheckable: true,
      treeCheckStrictly: true,
      treeNodeFilterProp: 'name',
      treeDefaultExpandAll: true,
      treeData: functionList.value,
      fieldNames: {
        value: 'id',
        label: 'name',
        children: 'childFuncList',
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    required: true,
    field: 'isEnable',
    label: '是否启用',
    component: 'RadioGroup',
    componentProps: {
      options: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
    },
  },
];
